<template>
  <input type="text" v-model="inputValue" @keydown.enter="add" />
</template>
<script>
import { defineComponent } from "vue";
import { ref } from "@vue/reactivity";

export default defineComponent({
  setup(props, { emit }) {
    const inputValue = ref("");
    const add = () => {
      if (!inputValue.value.trim()) {
        return;
      }
      emit("todoItem", {
        id: Date.now(),
        name: inputValue.value,
        isCompleted: false,
      });
      inputValue.value = "";
    };
    return {
      inputValue,
      add,
    };
  },
});
</script>
